<template>
  <view class="fab" :class="[fabClass]">
    <view class="main-btn" @click="open">+</view>
    
    <view class="buttons">
      <view class="button" v-for="(item, index) in list.slice(0, position !== 'center' ? 3 : 4)" :key="index" 
        :class="[`button-${index+1}`, {'btn-none': !isOpen}]"
      >
        {{index+1}}
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      position: {
        default: String,
        default: 'bottom'
      }
    },
    computed: {
      fabClass() {
        return `fab-${this.position}`
      }
    },
    data() {
      return {
        list: [1, 2, 3, 4],
        isOpen: false
      }
    },
    methods: {
      open() {
        this.isOpen = !this.isOpen
      }
    }
  }
</script>

<style lang="scss" scoped>
  .fab {
    width: 100upx;
    height: 100upx;
    
    &.fab-top {
      display: flex;
      align-items: center;
      
      .buttons {
        width: 80upx;
        position: absolute;
        top: -310upx;
        left: 0;
        right: 0;
        margin: auto;
        display: flex;
        flex-direction: column;
        flex-direction: column-reverse;
        
        .button {
          margin-bottom: 25upx;
          
          &.btn-none {
            transform: translateY(50upx) scale(0);
          }
        }
      }
    }
    
    &.fab-bottom {
      display: flex;
      align-items: center;
      
      .buttons {
        width: 80upx;
        position: absolute;
        top: 125upx;
        left: 0;
        right: 0;
        margin: auto;
        
        .button {
          margin-bottom: 25upx;
          
          &.btn-none {
            transform: translateY(-50upx) scale(0);
          }
        }
      }
    }
    
    &.fab-left {
      display: flex;
      align-items: center;
      
      .buttons {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        position: absolute;
        right: 100upx;
        top: 0;
        bottom: 0;
        margin: auto;
        
        .button {
          margin-right: 25upx;
          
          &.btn-none {
            transform: translateX(50upx) scale(0);
          }
        }
      }
    }
    
    &.fab-right {
      display: flex;
      align-items: center;
      
      .buttons {
        display: flex;
        align-items: center;
        position: absolute;
        left: 100upx;
        top: 0;
        bottom: 0;
        margin: auto;
        
        .button {
          margin-left: 25upx;
          
          &.btn-none {
            transform: translateX(-50upx) scale(0);
          }
        }
      }
    }
    
    &.fab-center {
      .buttons {
        .button {
          position: absolute;
        }
        
        .button-1 {
          top: -100upx;
          left: 0;
          right: 0;
          margin: auto;
        }
        
        .button-2 {
          top: 0;
          bottom: 0;
          right: -100upx;
          margin: auto;
        }
        
        .button-3 {
          bottom: -100upx;
          left: 0;
          right: 0;
          margin: auto;
        }
        
        .button-4 {
          top: 0;
          bottom: 0;
          left: -100upx;
          margin: auto;
        }
      }
    }
    
    .main-btn {
      width: 100upx;
      height: 100upx;
      line-height: 100upx;
      text-align: center;
      background: #007AFF;
      border-radius: 50%;
      color: #fff;
      font-size: 35upx;
    }
    
    .buttons {
      
      .button {
        width: 80upx;
        height: 80upx;
        line-height: 80upx;
        text-align: center;
        background: #007AFF;
        border-radius: 50%;
        color: #fff;
        transition: all .25s;
        
        &.btn-none {
          transform: scale(0);
          opacity: 0;
        }
        
        &.button-2 {
          transition-delay: 0.03s;
        }
        
        &.button-3 {
          transition-delay: 0.06s;
        }
        
        &.button-4 {
          transition-delay: 0.09s;
        }
      }
    }
  }
</style>
